import React from 'react';
import { motion } from 'framer-motion';
import { ArrowRight, Play, CheckCircle, Star, Video, Film, Book, Ticket } from 'lucide-react';

const Hero = () => {
  return (
    <section className="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-800">
      {/* Background Elements - 简化背景元素 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-32 w-80 h-80 bg-blue-500 opacity-5 blur-3xl"></div>
        <div className="absolute -bottom-32 -left-32 w-80 h-80 bg-cyan-500 opacity-5 blur-3xl"></div>
      </div>
      
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left Column - Content */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center lg:text-left"
          >
            <div className="inline-flex items-center px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 mb-6">
              <Star className="w-5 h-5 mr-2" />
              <span className="font-medium">让短视频创作更简单</span>
            </div>
            
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 dark:text-white mb-6">
              一站式
              <span className="text-[#345aff]"> 短视频创作平台</span>
              <br />
            </h1>
            
            <p className="text-lg md:text-xl text-zinc-600 dark:text-zinc-300 mb-8 max-w-2xl">
              创作猫是一个一站式短视频创作平台，为用户提供视频创作、编辑、发布、分析等一站式服务。
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="bg-[#345aff] text-white px-8 py-4 font-semibold hover:shadow-xl transition-all duration-200 flex items-center justify-center"
              >
                开始免费试用
                <ArrowRight className="w-5 h-5 ml-2" />
              </motion.button>
              
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white px-8 py-4 font-semibold hover:shadow-lg transition-all duration-200 flex items-center justify-center border border-zinc-200 dark:border-zinc-700"
              >
                <Play className="w-5 h-5 mr-2" />
                观看演示
              </motion.button>
            </div>
            
            <div className="mt-12 flex items-center justify-center lg:justify-start">
              <div className="flex -space-x-2">
                {[1, 2, 3, 4].map((item) => (
                  <div 
                    key={item} 
                    className="w-10 h-10 bg-zinc-200 dark:bg-zinc-700 border-2 border-white dark:border-zinc-800 flex items-center justify-center text-xs font-medium text-zinc-700 dark:text-zinc-300"
                  >
                    {item === 1 ? 'JD' : item === 2 ? 'AS' : item === 3 ? 'MK' : 'TP'}
                  </div>
                ))}
              </div>
              
              <div className="ml-4">
                <div className="flex items-center">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Star key={star} className="w-4 h-4 text-yellow-400 fill-yellow-400" />
                  ))}
                </div>
                <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-1">
                  来自 <span className="font-semibold">2,000+</span> 用户的评价
                </p>
              </div>
            </div>
          </motion.div>
          
          {/* iPad风格UI展示 - 精简优化版 */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative"
          >
            {/* iPad外框 - 简化设计 */}
            <div className="relative mx-auto bg-gray-100 dark:bg-gray-800 rounded-[24px] p-3 w-[900px] h-[520px] shadow-lg border border-gray-200 dark:border-gray-700">
              {/* iPad屏幕 */}
              <div className="relative w-full h-full bg-white dark:bg-gray-900 rounded-[20px] overflow-hidden">
                {/* 状态栏 - 简化 */}
                <div className="flex justify-between items-center px-6 py-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
                  <span className="text-xs font-medium text-gray-500 dark:text-gray-400">9:41</span>
                  <div className="flex space-x-1">
                    <div className="w-4 h-3 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
                    <div className="w-1 h-3 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
                    <div className="w-6 h-3 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
                  </div>
                </div>
                
                {/* 应用内容 - 横向布局，增加留白 */}
                <div className="p-6 h-full overflow-hidden">
                  <div className="flex h-full">
                    {/* 左侧导航栏 - 简化 */}
                    <div className="w-16 bg-gray-50 dark:bg-gray-800 rounded-xl mr-6 flex flex-col items-center py-6">
                      <div className="w-8 h-8 bg-[#345aff] rounded-lg flex items-center justify-center mb-8">
                        <span className="text-white text-xs font-bold">猫</span>
                      </div>
                      
                      {[
                        { icon: 'home', active: true },
                        { icon: 'edit', active: false },
                        { icon: 'search', active: false },
                        { icon: 'user', active: false }
                      ].map((item, index) => (
                        <div 
                          key={index} 
                          className={`w-8 h-8 rounded-lg flex items-center justify-center mb-6 ${item.active ? 'bg-blue-100 dark:bg-blue-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                        >
                          <div className={`w-5 h-5 ${item.active ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}`}>
                            {item.icon === 'home' && (
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                <polyline points="9 22 9 12 15 12 15 22"/>
                              </svg>
                            )}
                            {item.icon === 'edit' && (
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                              </svg>
                            )}
                            {item.icon === 'search' && (
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <circle cx="11" cy="11" r="8"/>
                                <path d="m21 21-4.35-4.35"/>
                              </svg>
                            )}
                            {item.icon === 'user' && (
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                                <circle cx="12" cy="7" r="4"/>
                              </svg>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                    
                    {/* 右侧内容区 */}
                    <div className="flex-1 overflow-y-auto">
                      <div className="flex items-center justify-between mb-6">
                        <h2 className="text-xl font-bold text-gray-900 dark:text-white">创作猫</h2>
                        <div className="flex space-x-2">
                          <div className="w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
                            <div className="w-4 h-4 text-gray-500 dark:text-gray-400">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                                <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                              </svg>
                            </div>
                          </div>
                          <div className="w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center">
                            <div className="w-4 h-4 text-gray-500 dark:text-gray-400">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                <circle cx="12" cy="12" r="3"/>
                                <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"/>
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      {/* 功能卡片网格 - 简化设计 */}
                      <div className="grid grid-cols-2 gap-6">
                        {/* 短视频变现卡片 */}
                        <motion.div 
                          whileHover={{ scale: 1.02 }}
                          className="bg-white dark:bg-gray-800 p-5 border border-gray-100 dark:border-gray-700 rounded-xl shadow-sm"
                        >
                          <div className="flex items-center mb-4">
                            <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center mr-3 rounded-lg">
                              <Video className="w-4 h-4 text-blue-600 dark:text-blue-400" strokeWidth={1.5} />
                            </div>
                            <h3 className="font-semibold text-gray-900 dark:text-white text-base">短视频变现</h3>
                          </div>
                          <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">轻松实现内容变现</p>
                          <div className="text-sm font-medium text-blue-600 dark:text-blue-400">¥5,280/月</div>
                        </motion.div>
                        
                        {/* 短剧卡片 */}
                        <motion.div 
                          whileHover={{ scale: 1.02 }}
                          className="bg-white dark:bg-gray-800 p-5 border border-gray-100 dark:border-gray-700 rounded-xl shadow-sm"
                        >
                          <div className="flex items-center mb-4">
                            <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center mr-3 rounded-lg">
                              <Film className="w-4 h-4 text-purple-600 dark:text-purple-400" strokeWidth={1.5} />
                            </div>
                            <h3 className="font-semibold text-gray-900 dark:text-white text-base">短剧创作</h3>
                          </div>
                          <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">一键生成精彩短剧</p>
                          <div className="text-sm font-medium text-purple-600 dark:text-purple-400">128.5万播放</div>
                        </motion.div>
                        
                        {/* 小说卡片 */}
                        <motion.div 
                          whileHover={{ scale: 1.02 }}
                          className="bg-white dark:bg-gray-800 p-5 border border-gray-100 dark:border-gray-700 rounded-xl shadow-sm"
                        >
                          <div className="flex items-center mb-4">
                            <div className="w-8 h-8 bg-green-100 dark:bg-green-900/20 flex items-center justify-center mr-3 rounded-lg">
                              <Book className="w-4 h-4 text-green-600 dark:text-green-400" strokeWidth={1.5} />
                            </div>
                            <h3 className="font-semibold text-gray-900 dark:text-white text-base">小说创作</h3>
                          </div>
                          <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">AI辅助创作小说</p>
                          <div className="text-sm font-medium text-green-600 dark:text-green-400">86.2万阅读</div>
                        </motion.div>
                        
                        {/* 电影票卡片 */}
                        <motion.div 
                          whileHover={{ scale: 1.02 }}
                          className="bg-white dark:bg-gray-800 p-5 border border-gray-100 dark:border-gray-700 rounded-xl shadow-sm"
                        >
                          <div className="flex items-center mb-4">
                            <div className="w-8 h-8 bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center mr-3 rounded-lg">
                              <Ticket className="w-4 h-4 text-amber-600 dark:text-amber-400" strokeWidth={1.5} />
                            </div>
                            <h3 className="font-semibold text-gray-900 dark:text-white text-base">电影票务</h3>
                          </div>
                          <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">特惠电影票购买</p>
                          <div className="text-sm font-medium text-amber-600 dark:text-amber-400">最高5折</div>
                        </motion.div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Floating Elements - 简化 */}
            <div className="absolute -top-4 -right-4 w-12 h-12 bg-blue-500 opacity-10 blur-xl"></div>
            <div className="absolute -bottom-4 -left-4 w-12 h-12 bg-cyan-500 opacity-10 blur-xl"></div>
          </motion.div>
        </div>
      </div>
      
      {/* Bottom Section - Client Logos */}
      <div className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900/80 backdrop-blur-sm border-t border-zinc-200 dark:border-zinc-800 py-6">
        <div className="max-w-none mx-auto px-4 sm:px-6 lg:px-8 w-full">

          
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
            {[
              { name: 'TechCorp', color: 'text-blue-600' },
              { name: 'InnovateCo', color: 'text-cyan-600' },
              { name: 'DataFlow', color: 'text-purple-600' },
              { name: 'CloudSync', color: 'text-green-600' },
              { name: 'NexusAI', color: 'text-red-600' },
              { name: 'Quantum', color: 'text-yellow-600' }
            ].map((client, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
                className="flex justify-center"
              >
                <div className={`font-bold text-lg ${client.color} opacity-70 hover:opacity-100 transition-opacity duration-200`}>
                  {client.name}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;